<template>
  <h2 ref="h2">setup属性</h2>
  <div>count: {{ count }}</div>
  <button @click="increment">+</button>
  <div>doubleCount: {{ doubleCount }}</div>

  <Child :num="5" @abc="fn" />

  <div>{{ msg }}</div>
</template>

<script setup>
// 写完setup属性，不需要export default
// import引入是不能少的
// return 不需要写了
import { ref, computed, onMounted, watch } from "vue";

// 对于组件来说，只需要引入不需要注册了
import Child from "../components/03-child-setup.vue";
import { useRoute } from "vue-router";
import { useStore } from "vuex";

const count = ref(5);

const increment = () => {
  count.value++;
};

const doubleCount = computed(() => {
  return count.value * 2;
});

onMounted(() => {
  console.log("onMounted");
  console.log(h2.value);
  console.log(route);
});

watch(count, (val) => {
  console.log("count被改成了" + val);
});

const h2 = ref(null);

const fn = () => {
  console.log("fn");
};

const route = useRoute();
const store = useStore();

const msg = computed(() => {
  return store.state.msg;
});
</script>
